<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<!--弹窗：编辑-->
<div th:fragment="atruleSpecial" class="modal inmodal fade" id="atruleSpecial_Modal"
     tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑例外</h4>
                <small class="font-bold"></small>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <form role="form" id="atruleSpecial_form">
                            <input id="atruleSpecial_id" name="id" type="hidden">
                            <div class="form-group"><label>标题</label> <input
                                    id="atruleSpecial_title" name="title"
                                    type="text" class="form-control"></div>
                            <div class="form-group"><label>例外日期</label>
                                <input id="atruleSpecial_specialDate" name="specialDate" type="text"
                                       class="form-control datetimepicker-input"
                                       data-toggle="datetimepicker"
                                       data-target="#atruleSpecial_specialDate"/>
                            </div>
                            <div class="form-group"><label>是否工作</label>
                                <div class="i-checks">
                                    <label> <input type="radio" value="true" name="isWork"> <i></i> 是
                                    </label>&nbsp;&nbsp;
                                    <label> <input type="radio" value="false" name="isWork"> <i></i> 否
                                    </label>
                                </div>
                            </div>
                            <div class="form-group workShow"><label>工作间隔（分钟）</label> <input
                                    id="atruleSpecial_interval" name="interval"
                                    type="text" class="form-control"></div>
                            <div class="form-group workShow"><label>工作时间
                                <a class="btn btn-white btn-bitbucket text-success" data-toggle="tooltip"
                                   data-placement="top" title="添加工作时间" onclick="atruleSpecialObj.addWorkTime()">
                                    <i class="fa fa-plus"></i>
                                </a>
                            </label>
                                <div id="atruleSpecial_worktimes"></div>
                            </div>
                            <div class="form-group"><label>备注</label> <textarea
                                    id="atruleSpecial_remark" name="remark"
                                    type="text" placeholder="" class="form-control"></textarea>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="atruleSpecialObj.submitHandler()">
                    保存
                </button>
            </div>
        </div>
    </div>

    <script id="atruleSpecial_worktimes_item_tmpl" type="text/x-jquery-tmpl">
        <div class="input-daterange input-group m-t-xs" id="atruleSpecial_worktimes_${i}">
            <input type="text" class="form-control-sm form-control datetimepicker-input datetimepicker-time" id="atruleSpecial_worktimes_startTime_${i}" name="startTime" data-toggle="datetimepicker" data-target="#atruleSpecial_worktimes_startTime_${i}"/>
            <span class="input-group-addon">至</span>
            <input type="text" class="form-control-sm form-control datetimepicker-input datetimepicker-time" id="atruleSpecial_worktimes_endTime_${i}" name="endTime" data-toggle="datetimepicker" data-target="#atruleSpecial_worktimes_endTime_${i}"/>
            <a onclick="atruleSpecialObj.delWorkTime(${i})" class="btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="删除工作时间">
                <i class="fa fa-trash"></i>
            </a>
        </div>



    </script>

    <script type="text/javascript">
        $(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
            $('.i-checks').on('ifChecked', function (event) {
                if (event.target.value == 'true') {
                    $('.workShow').removeClass('d-none');
                } else {
                    $('.workShow').addClass('d-none');
                }
            });
            $('#atruleSpecial_specialDate').datetimepicker({
                format: 'YYYY-MM-DD'
            });
            $('[data-toggle="tooltip"]').tooltip()
            atruleSpecialObj.myValidator = $('#atruleSpecial_form').validate({
                rules: atruleSpecialObj.dataRule,
                submitHandler: function (form) {
                    atruleSpecialObj.dataFormSubmit(form);
                }
            });
        })
        var atruleSpecialObj = new Object({
            myValidator: undefined,
            ruleId: undefined,
            dataRule: {
                title: {
                    required: true
                }, specialDate: {
                    required: true
                }, interval: {
                    required: true
                }, remark: {
                    maxlength: 400
                }
            },
            // 工作时间数量，第一次初始化后，新增时先+1
            workTimeIndex: 0,
            init: function (ruleId, id) {
                atruleSpecialObj.ruleId = ruleId;
                if (id) {
                    $.myGet({
                        url: `/appoin/atspecial/info/${id}`,
                        success: function (data) {
                            if (data && data.code === 0) {
                                atruleSpecialObj.fillForm(data.special);
                            } else {
                                toastr.error(data.msg, '操作失败')
                            }
                        }
                    })
                } else {
                    atruleSpecialObj.fillForm();
                }
                $('#atruleSpecial_Modal').modal('show')
            },
            fillForm: function (data = {
                interval: 15,
                isWork: true,
                specialWorkTimes: [{startTime: "08:30", endTime: "12:00"}, {startTime: "14:00", endTime: "17:30"}]
            }) {
                $('#atruleSpecial_worktimes').empty();
                $("#atruleSpecial_form")[0].reset();
                $("input[type='hidden']").val("");
                for (let i in data) {
                    if ($("#atruleSpecial_form").find(`input[name=${i}]`).length > 0) {
                        if (i != "isWork") {
                            $("#atruleSpecial_form").find(`input[name=${i}]`).val(data[i])
                        }
                    }
                }
                $(`input:radio[name="isWork"][value=${data.isWork}]`).iCheck('check');
                if (data.specialWorkTimes) {
                    for (let i = 0; i < data.specialWorkTimes.length; i++) {
                        atruleSpecialObj.buildWorkTime(i + 1, data.specialWorkTimes[i]);
                    }
                }

            },
            // index从1开始
            buildWorkTime: function (index, workTime) {
                if (index) {
                    atruleSpecialObj.workTimeIndex = index - 1;
                } else {
                    atruleSpecialObj.workTimeIndex = atruleSpecialObj.workTimeIndex + 1;
                }
                $('#atruleSpecial_worktimes_item_tmpl').tmpl({i: atruleSpecialObj.workTimeIndex}).appendTo($('#atruleSpecial_worktimes'));
                $('.datetimepicker-time').datetimepicker({
                    format: 'HH:mm'
                });
                $('[data-toggle="tooltip"]').tooltip()
                if (workTime) {
                    $(`#atruleSpecial_worktimes_startTime_${atruleSpecialObj.workTimeIndex}`).val(workTime.startTime);
                    $(`#atruleSpecial_worktimes_endTime_${atruleSpecialObj.workTimeIndex}`).val(workTime.endTime);
                }
            },
            addWorkTime: function () {
                atruleSpecialObj.buildWorkTime();
            },
            delWorkTime: function (index) {
                $(`#atruleSpecial_worktimes_${index}`).remove()
            },
            submitHandler: function () {
                $("#atruleSpecial_form").submit();
            },
            dataFormSubmit: function (form) {
                let formVals = $(form).serializeArray();
                let data = {}
                for (let i = 0; i < formVals.length; i++) {
                    data[formVals[i].name] = formVals[i].value;
                }
                if (data.isWork == 'true') {
                    let startTimes = $('input[name="startTime"]');
                    let endTimes = $('input[name="endTime"]');
                    for (let i = 0; i < startTimes.length; i++) {
                        if ($(startTimes[i]).val() == '') {
                            $.mySwalWarn("请正确设置工作时间")
                            return;
                        }
                    }
                    for (let i = 0; i < endTimes.length; i++) {
                        if ($(endTimes[i]).val() == '') {
                            $.mySwalWarn("请正确设置工作时间")
                            return;
                        }
                    }
                    let specialWorkTimes = [];
                    for (let i = 0; i < startTimes.length; i++) {
                        specialWorkTimes.push({startTime: startTimes[i].value, endTime: endTimes[i].value});
                    }
                    data.specialWorkTimes = specialWorkTimes;
                }
                data.ruleId = atruleSpecialObj.ruleId;
                $.myPost({
                    url: `/appoin/atspecial/${data.id ? 'update' : 'save'}`,
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            atruleListObj.refreshSpecialDataList();
                            atruleSpecialObj.fillForm();
                            $('#atruleSpecial_Modal').modal('hide')
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            }
        })
    </script>
</div>
</body>
</html>